<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
		}
		section {
			width: 100px;
			height: 400px;
			background-color: #ccc;
		}
		header {
			/* width: 400px - 30px; css没有计算能力 */
			/* 100%是相对于父元素宽的100% */
			/* calc() css提供的一个计算函数, 要求运算符两侧必须有空格 */
			width: calc(100% - 30px);
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<!-- 需求: 一个父元素有一个子元素 子元素的宽度永远 自动 比父元素多30px, 就可以使用calc() 动态计算 -->
	<section>
		<header></header>
	</section>
</body>
</html>